<!--
 * @Desc: 
 * @Author: xuelianYi
 * @Date: 2021-09-24 16:30:45
 * @LastEditors: xuelianYi
 * @LastEditTime: 2021-09-26 11:08:49
 * @FilePath: \canvas\01canvas\index.html
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<!-- 
			canvas三要素
			id:作为唯一的标识
			width:画布内容宽度的像素大小 (与style的宽度和高度是有区别的)
			height:画布内容高度的像素大小

			canvas仅仅只是1个画布标签，要绘制内容，必须用js绘制
		 -->

	<canvas id="canvas1" width="600" height="600">这里的内容，正常画布是不显示的，你的浏览器不支持canvas才能看见</canvas>

	<script>
		// 1.找到画布对象
		var canvas1 = document.getElementById("canvas1")
		console.log([canvas1]);

		// 2.上下文对象(画笔)
		var ctx = canvas1.getContext("2d")
		console.log(ctx);

		// 3.绘制路径
		ctx.rect(50, 50, 300, 300)

		// 4.填充
		ctx.fillStyle = "pink"
		ctx.fill()

		// 5.描边，渲染路径
		ctx.lineWidth = 20
		ctx.strokeStyle = "blue"
		ctx.stroke()




	</script>

</body>

</html>